<template>
  <el-container id="c1">
    <el-header style="padding:0;height: 120px">
      <app-header></app-header>
    </el-header>
    <el-container id="c2">
      <el-aside id="a1">
        <app-menu style="top: 0px;bottom: 0px;left:0px;right:0px;position: absolute"></app-menu>
      </el-aside>
      <el-container id="c3">
          <app-content></app-content>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import AppHeader from "@/view/console/layout/AppHeader";
import AppMenu from "@/view/console/layout/AppMenu";
import AppContent from "@/view/console/layout/AppContent";
// import AppFooter from "@/components/layout/AppFooter";

export default {
  name: 'CentralConsole',
  components: {
    AppHeader,
    AppMenu,
    AppContent,
    // AppFooter
  },
  data() {
    return {
    }
  },
  mounted() {
  },
}
</script>
<style>
#c1 {
  background: linear-gradient(to bottom, #464F70 ,#071135 );
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#a1{
  left:40px;
  top:20px;
  width:20% !important;
  bottom: 20px;
  position: absolute;
  border-radius: 10px;
}

#c2{
  height: calc(100vh - 120px);
  overflow:hidden;
  position: relative
}

#c3{
  left: calc(20% + 60px);
  top: 20px;
  right: 20px;
  bottom: 20px;
  position: absolute;
  background:#313A63;
  border-radius: 10px;
}

/*.el-footer{*/
/*  bottom: 0;*/
/*}*/
</style>
